<template>  
  <view class="container">  
    <view class="title">我的订单</view>  
    <scroll-view class="order-list" scroll-y="true">  
      <view v-for="(order, index) in orders" :key="order.orderId" class="order-item">  
        <view class="order-header">  
          <text class="order-number">订单号：{{ order.orderId }}</text>  
          <text class="order-status">{{ order.status }}</text>  
        </view>  
        <view class="order-content">  
          <view v-for="(item, index) in order.items" :key="index" class="order-item-content">  
            <image :src="item.image" class="item-image" mode="aspectFit"></image>  
            <text class="item-name">{{ item.name }}</text>  
            <text class="item-price">￥{{ item.price }}</text>  
          </view>  
        </view>  
        <view class="order-footer">  
          <text class="order-total">总价：￥{{ order.total }}</text>  
          <button class="btn-detail" @click="viewDetail(order.orderId)">查看详情</button>  
        </view>  
      </view>  
    </scroll-view>  
  </view>  
</template>

<script>
	export default {
		data() {
			return {  
			    orders:
			    [  
					{  
						orderId: '1001',  
						status: '已完成',  
						items: [  
							{  
								name: '宫保鸡丁饭', 
								image: '/static/icons/chicken_rice.jpg',  
								price: 25.00,  
								quantity: 1  
							},  
							{  
								name: '可乐',  
								image: '/static/icons/cola.jpg',  
								price: 5.00,  
								quantity: 1  
							}  
						],  
						total: 30.00,  
						createTime: '2023-04-15 12:00:00' // 可以添加更多字段，如创建时间等  
					},  	
					{  
						orderId: '1002',  
						status: '配送中',  
						items: [  
							{  
								name: '牛肉拉面',  
								image: '/static/icons/beef_noodle.jpg',  
								price: 30.00,  
								quantity: 1  
							}  
						],  
						total: 30.00,  
						createTime: '2023-04-14 18:30:00'  
					}, 
				]  
			}
		},
		methods: {
			
		}
	}
</script>

<style>  
.container {  
  padding: 20rpx;  
  background-color: #f5f5f5;  
}  
  
.title {  
  font-size: 32rpx;  
  font-weight: bold;  
  color: #333;  
  margin-bottom: 20rpx;  
  text-align: center;  
}  
  
.order-list {  
  background-color: #fff;  
  border-radius: 10rpx;  
  margin-bottom: 20rpx;  
}  
  
.order-item {  
  display: flex;  
  flex-direction: column;  
  padding: 20rpx;  
  border-bottom: 1rpx solid #eee;  
}  
  
.order-item:last-child {  
  border-bottom: none;  
}  
  
.order-header {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-bottom: 10rpx;  
}  
  
.order-number {  
  font-size: 28rpx;  
  color: #666;  
}  
  
.order-status {  
  font-size: 24rpx;  
  color: #333;  
  padding: 5rpx 10rpx;  
  border-radius: 5rpx;  
  /* 根据订单状态改变背景色，例如： */  
  background-color: #90ee90; /* 绿色表示已完成 */  
  /* 如果订单未完成，可以使用其他颜色 */  
}  
  
.order-content {  
  display: flex;  
  flex-wrap: wrap;  
  margin-bottom: 10rpx;  
}  
  
.order-item-content {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  margin-right: 20rpx;  
  margin-bottom: 20rpx;  
}  
  
.item-image {  
  width: 80rpx;  
  height: 80rpx;  
  border-radius: 5rpx;  
  margin-right: 10rpx;  
}  
  
.item-name {  
  font-size: 24rpx;  
  color: #666;  
  margin-bottom: 5rpx;  
}  
  
.item-price {  
  font-size: 20rpx;  
  color: #999;  
}  
  
.order-footer {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
  
.order-total {  
  font-size: 26rpx;  
  font-weight: bold;  
  color: #333;  
}  
  
.btn-detail {  
  padding: 5rpx 15rpx;  
  background-color: #009688;  
  color: #fff;  
  border-radius: 5rpx;  
  font-size: 24rpx;  
}  
</style>
